<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形组件的使用</title>
    <link rel="stylesheet" href="/static/plugin/zTree/zTreeStyle.css">
    <script src="/static/jquery-3.4.1.js"></script>
    <script src="/static/plugin/zTree/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/plugin/zTree/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/plugin/zTree/jquery.ztree.exedit.js"></script>
</head>
<body>
<div>
    <!--
    注意:
        1. 选定的ul必须设置classztree, 否则会导致树结构不显示.
    -->
    <ul id="tree" class="ztree"></ul>
</div>
<button onclick="getDate()">查看tree全部数据</button>
</body>
<script>

    $(() => {
        init();
        //setEdit();
    });

    function init() {
        let setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    /*设置子id的名称*/
                    idKey: "id",
                    /*设置父id的名称*/
                    pIdKey: "pid",
                    rootPId: ""
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: true,
                showRenameBtn: true,
                removeTitle: "remove",
                renameTitle: "rename"
            },
            callback: {
                beforeClick: function (treeId, treeNode) {
                    let zTree = $.fn.zTree.getZTreeObj("tree");
                    console.log(treeId, 111, treeNode);
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        console.log(treeId, treeNode);
                        return true;
                    }
                },
                beforeRemove: function (treeId, treeNode) {
                    console.log("删除", treeId, 111, treeNode);
                }
            }
        };

        $.ajax({
            type: "GET",
            url: "/api/customize/method",   //ajax请求地址
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting, data); //加载数据
            },
        });
    }

    function setEdit() {
        let zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.setting.edit.showRemoveBtn = true;
        zTree.setting.edit.showRenameBtn = true;
        zTree.setting.edit.removeTitle = "remove";
        zTree.setting.edit.renameTitle = "rename";
    }

    function getDate() {
        let treeObj = $.fn.zTree.getZTreeObj("tree");
        let nodes = treeObj.getNodes();
        let arr = new Array();

        console.log(111, nodes);
        eachToArray(nodes, arr);
        console.log(arr);
    }

    function eachToArray(arr, result) {
        $.each(arr, function (index, value) {
            console.log(value, value.children);
            if(value.children !== null && value.children !== undefined && value.children.length > 0) {
                eachToArray(value.children, result);
            }
            result.push({
                id: value.id,
                name: value.name,
                pid: value.pid,
                level: value.level + 1
            });
        });
    }

</script>
</html>